<template>
    <div class="order_container">
        <!-- 头部 -->
        <navbar></navbar>
        <!-- 主体 -->
        <div>
            <!-- 图片轮播 -->
            <div class="orderImgInfo">
                <van-swipe class="swiper_container" lazy-render>
                    <van-swipe-item class="swiper_item">
                        <img src="@/assets/order/order_detail.webp" alt="">
                    </van-swipe-item>
                    <van-swipe-item class="swiper_item">
                        <img src="@/assets/order/order_detail.webp" alt="">
                    </van-swipe-item>
                    <van-swipe-item class="swiper_item">
                        <img src="@/assets/order/order_detail.webp" alt="">
                    </van-swipe-item>
                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>
            </div>
            <!-- 秒杀 -->
            <div class="activity">
                <div class="activity_contaner">
                    <div class="left">
                        <div>
                            <span>每日抄底</span>
                            <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                            <div style="display: inline-block;">
                                <span>距结束</span>
                                <span>1天1小时</span>
                            </div>
                        </div>
                        <div class="price_proprice">
                            <span class="price">￥119</span>
                            <div class="proprice">到手￥99></div>
                        </div>
                    </div>
                    <div class="right">
                        <img src="@/assets/order/order_year.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 商品标题 -->
            <div class="order_title_container">
                <div class="order_title">
                    <div class="info">
                        <div class="name">23春上新 男式直筒斜插袋休闲裤</div>
                        <div class="simpleBrandInfo">
                            <span class="bgImg"></span>
                            <span class="order_logo">
                                <img class="logo" src="@/assets/order/oredr_logo.png" alt="">
                            </span>
                            <span class="title">网易严选</span>
                        </div>
                        <div class="desc">推荐理由</div>
                    </div>
                    <div class="comment">
                        <div class="info_wrap">
                            <div class="num">99.7%</div>
                            <div class="com">好评率</div>
                        </div>
                        <i class="iconfont icon-xiangyou arrow"></i>

                    </div>
                </div>
                <div class="rcmdBanner">
                    <div class="angleTop">
                        <span class="angleTopcenter"></span>
                    </div>
                    <ul class="list">
                        <li class="item">
                            <div class="key">1</div>
                            <div class="rcmdInfo">上班出差休闲，一条搞定</div>
                        </li>
                        <li class="item">
                            <div class="key">2</div>
                            <div class="rcmdInfo">上班出差休闲，一条搞定</div>
                        </li>
                        <li class="item">
                            <div class="key">3</div>
                            <div class="rcmdInfo">上班出差休闲，一条搞定</div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 地址 详情 -->
            <div>
                <div class="tm_container">
                    <ul class="tm-list ">
                        <van-popup v-model:show="show" class="props" closeable position="bottom" :style="{ height: '30%' }">
                            <div class="title">邮费</div>
                            <div class="props_info">
                                <div class="ruleTitle">满99元免邮</div>
                                <div class="info">
                                    本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                                </div>
                            </div>

                        </van-popup>
                        <li class="item">
                            <div class="tm-listItem m-points">
                                <div class="inner">
                                    <div class="freigh">邮费：单件包邮</div>
                                </div> <i @click="show = true" class="iconfont icon-xiangyou tm-arrow"></i>
                            </div>
                        </li>
                        <li class="item">
                            <div>
                                <div class="tm-listItem">
                                    <div class="inner">
                                        <div><label class="label">购物返：</label>
                                            <div class="txt" style="display: inline-block;">最高返<span
                                                    style="color: rgb(221, 26, 33) ;">11积分</span></div>
                                        </div>
                                    </div> <i class="iconfont icon-xiangyou tm-arrow"></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="address_container">
                    <ul class="tm-list ">
                        <li class="item">
                            <div class="tm-listItem ">
                                <div class="inner">
                                    <div class="specSelect"><span class="it">请选择规格数量</span></div>
                                </div> <i class="iconfont icon-xiangyou arrow"></i>
                            </div>
                        </li>
                        <li class="item">
                            <div class="tm-listItem undefined noArrow">
                                <div class="inner">
                                    <div class="couponLimit">限制：该商品不可使用优惠券</div>
                                </div>
                            </div>
                        </li>
                        <li class="item">
                            <div class="tm-listItem undefined">
                                <div class="inner">
                                    <div class="m-deliveryInfo">
                                        <div class="left" style="display: inline-block;">配送：</div>
                                        <div class="right" style="display: inline-block;">
                                            <div class="pickAddr">请选择配送地址</div>
                                        </div>
                                    </div>
                                </div> <i class="iconfont icon-xiangyou arrow"></i>
                            </div>
                        </li>
                        <li class="item">
                            <div class="tm-listItem undefined">
                                <div class="inner">
                                    <div class="m-serviceEntry">
                                        <div class="left" style="display: inline;">服务：</div>
                                        <div class="right ">
                                            <div class="right-item-wraper">
                                                <span>严选自营</span>
                                                <span>严选自营</span>
                                                <span>严选自营</span>
                                                <span>严选自营</span>
                                                <span>严选自营</span>
                                            </div>
                                        </div>
                                        <i class="icon u-icon-list-address-right"></i>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 轮播 -->
            <div class="commit">
                <van-swipe class="swiper_commit" lazy-render>
                    <van-swipe-item class="commit_item">
                        <img src="@/assets/order/commit.webp" alt="">
                    </van-swipe-item>
                    <van-swipe-item class="commit_item">
                        <img src="@/assets/order/commit.webp" alt="">
                    </van-swipe-item>
                    <van-swipe-item class="scommit_item">
                        <img src="@/assets/order/commit.webp" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import navbar from '../../components/navbar/index.vue'
const show = ref(false)


</script>

<style lang="less" scoped>
.order_container {
    background-color: rgb(244, 244, 244);
    padding-bottom: 80px;
}

.orderImgInfo {
    width: 375px;
    height: 375px;

    .swiper_container {
        .swiper_item img {
            width: 100%;
            height: 100%;
        }
    }
}

.activity {
    .activity_contaner {
        background-color: #f00;
        color: #fff;
        display: flex;
        font-size: 12px;
        position: relative;

        .left {
            padding: 8px 0 0;
            margin-left: 10px;
            width: 285px;
            height: 66px;

            .price_proprice {
                position: relative;
                font-size: 28px;
                font-weight: bold;

                .price {}

                .proprice {
                    position: absolute;
                    top: 7px;
                    left: 78px;
                    color: rgb(250, 30, 50);
                    background-color: rgb(255, 255, 255);
                    border-radius: 10px;
                    font-size: 12px;
                    width: 60px;
                    line-height: 23px;
                    height: 23px;
                    display: inline-block;
                }
            }
        }

        .right {
            position: absolute;
            width: 75px;
            height: 40px;
            bottom: 12px;
            right: 1px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.order_title_container {
    padding: 13px 0 18px 15px;
    background: #fff;
    margin-bottom: 10px;

    .order_title {
        display: flex;
        justify-content: space-between;

        .info {
            .name {
                font-size: 16px;
            }

            .simpleBrandInfo {

                .bgImg {
                    display: inline-block;
                    width: 32px;
                    height: 16px;
                    background-image: url('@/assets/order/order_type.png');
                    background-size: 100% 100%;
                    margin-right: 5px;
                }

                .order_logo {
                    width: 14px;
                    height: 14px;
                    display: inline-block;

                    .logo {
                        height: 100%;
                        width: 100%;
                    }
                }

                .title {
                    margin-left: 5px;
                    font-size: 12px;
                }
            }

            .desc {
                font-size: 12px;
            }
        }

        .comment {
            display: flex;
            margin-right: 10px;

            .arrow {
                font-size: 12px;
                margin-top: 10px;
            }

            .info_wrap {
                .num {
                    font-size: 16px;
                    color: red;
                }

                .com {
                    font-size: 12px;
                }
            }
        }
    }

    .rcmdBanner {
        margin-top: 5px;
        width: 325px;
        background-color: #fafafa;
        border: 1px solid #eee;
        padding: 7px 10px;

        .angleTop {
            // height: 4px;
            position: relative;
            width: 0.10667rem;
            height: 4px;
            top: -14px;
            border-left: 4px solid transparent;
            border-bottom: 4px solid #e6e6e6;
        }

        .list {
            .item {
                height: 18px;
                line-height: 18px;

                .key {

                    color: red;
                    width: 12px;
                    height: 12px;
                    border: 1px solid red;
                    border-radius: 50%;
                    display: inline-block;
                    font-size: 12px;
                    text-align: center;
                }

                .rcmdInfo {
                    display: inline-block;
                    font-size: 12px
                }
            }
        }

    }
}

.tm_container {


    .tm-list {


        .item {
            height: 52px;
            line-height: 52px;
            background-color: #fff;
            font-size: 14px;
        }

        .item::after {
            content: "";
            position: absolute;
            background-color: #d9d9d9;
            left: 15px;
            width: 360px;
            height: 1px;
            -webkit-transform-origin: 50% 100% 0;
            transform-origin: 50% 100% 0;
            bottom: -70px;
        }

        .tm-listItem {
            padding: 0 0 0 20px;
            display: flex;
            justify-content: space-between;
            width: 345px;

            .inner {
                display: inline-block;

            }

            .tm-arrow {
                // margin-right: 10px;
            }
        }
    }
}

.address_container {
    margin-top: 10px;

    .tm-list {


        .item {
            height: 52px;
            line-height: 52px;
            background-color: #fff;
            font-size: 14px;
        }

        .item::after {
            content: "";
            position: absolute;
            background-color: #d9d9d9;
            left: 15px;
            width: 360px;
            height: 1px;
            -webkit-transform-origin: 50% 100% 0;
            transform-origin: 50% 100% 0;
            bottom: -70px;
        }

        .tm-listItem {
            padding: 0 0 0 20px;
            display: flex;
            justify-content: space-between;
            width: 345px;

            .inner {
                display: inline-block;

                .m-serviceEntry {
                    height: 50px;

                    .right {

                        display: inline-block;
                        position: absolute;


                        .right-item-wrap {
                            height: 50px;
                            line-height: 50px;

                            .right-item {
                                display: inline-block;
                            }
                        }

                    }
                }
            }

            .tm-arrow {
                // margin-right: 10px;
            }
        }
    }
}

.props {
    .title {
        font-size: 18px;
        text-align: center;
        padding: 16px;
        border-bottom: 1px solid #d9d9d9;
    }

    .props_info {
        padding: 26px 15px;

        .ruleTitle {
            font-size: .28rem;
            line-height: .28rem;
            height: 0.28rem;
            position: relative;
            padding-left: 0.24rem;
            margin-bottom: 0.16rem;

            &::after {
                content: " ";
                background: #dd1a21;
                height: 0.08rem;
                width: 0.08rem;
                border-radius: 50%;
                display: inline-block;
                position: absolute;
                top: 0.16rem;
                left: 0;
            }
        }


        .info {

            font-size: 12px;
        }
    }

}

.commit {
    height: 100px;

    .swiper_commit img {
        width: 100%;
        height: 100px;

        .commit_item img {
            width: 100%;
            height: 100%;
        }
    }
}

.custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 2px 5px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
}</style>